<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#father{
				width: 500px;
				height: 500px;
				background: green;
				margin: 0 auto;
				position: relative;
			}
			#son{
				position: absolute;
				width: 200px;
				height: 200px;
				background: red;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
			
			
			
		</style>
	</head>
	<body>
		<div id="father">
			<div id="son"></div>
		</div>
		<script>
			father.onclick=function(){
				console.log('我是父元素事件！')
			}
			
		son.onclick=function(e){
			var  e=e||window.event;
			e.stopPropagation();
			//e.cancelBubble=true;
			console.log('我是子元素事件！')
		}
			
			
			
		</script>
		
		
	</body>
</html>
